<template>
  <div>
    <el-upload
      ref="uploadRef"
      class="ele-flex"
      action="#"
      :auto-upload="false"
      :on-change="handleChange"
    >
      <template #trigger>
        <el-button type="primary">选择文件</el-button>
      </template>
      <el-button class="ml-3" type="success" @click="submitUpload">
        上传到服务器
      </el-button>
    </el-upload>
  </div>
</template>

<script setup>
  import { useTemplateRef } from 'vue';
  import { ElMessage } from 'element-plus';
  const uploadRef = useTemplateRef('uploadRef');
  const submitUpload = () => {
    uploadRef.value.submit();
  };
  const checkFileType = (file) => {
    console.log(file, 'file');
    const isVideo =
      file.type === 'video/mp4' || file.type === 'video/x-matroska';
    if (!isVideo) {
      ElMessage.error('视频只能是 mp4 格式!');
      return false;
    }
    return true;
  };

  const handleChange = (file, files) => {
    console.log(file, files);
    // 判断文件类型
    if (!checkFileType(file.raw)) return;
    // 计算文件哈希(用于秒传)
    calcFileHash(file.raw);
  };

  const calcFileHash = (file) => {
    console.log(file);
  };
</script>

<style lang="scss" scoped></style>
